<!--入会成功-->
<template>
  <view class="join-success">
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <view class="member-success">{{ joinSuccess }}</view>
    <view class="memberbtn_group">
      <view class="memberBtn home" @click="goIndex">查看首页</view>
      <view class="memberBtn info" @click="goInfo">我的账户</view>
    </view>
    <view class="vip-container" v-if="isICH == 1">
      <image src="https://100000057-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/ich_vip.jpg" mode="widthFix" style="width:100%;"></image>
    </view>
    <view class="vip-container" v-else style="width:750rpx;background-color: #dcdcd4;padding-bottom:100rpx;display:none;">
      <view class="" style="line-height: 160rpx;font-size: 32rpx;text-align: center;">会员权益</view>
      <view class="main-container" style="padding: 0 10rpx;">
        <view style="max-width: 100%;padding: 40rpx 10rpx;background-color: #f1f1f1;display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;">
          <view style="display:flex;align-items: center;padding-right: 10rpx;width: 220rpx;">
            <image
              style="width: 40rpx;height: 40rpx;padding-right: 10rpx;"
              src=""
              mode="widthFix"
            ></image>
            <text>会员专享礼券</text>
          </view>
          <view style="flex: 1;font-size: 24rpx;">入会礼券（限时礼遇），专属升级礼券</view>
        </view>
        <view style="max-width: 100%;padding: 40rpx 10rpx;background-color: #fff;display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;">
          <view style="display:flex;align-items: center;padding-right: 10rpx;width: 220rpx;">
            <image
              style="width: 40rpx;height: 40rpx;padding-right: 10rpx;"
              src=""
              mode="widthFix"
            ></image>
            <text>会员优先购</text>
          </view>
          <view style="flex: 1;font-size: 24rpx;">优先选购折扣系列及限量新品系列(即将上线)</view>
        </view>
        <view style="max-width: 100%;padding: 40rpx 10rpx;background-color: #f1f1f1;display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;">
          <view style="display:flex;align-items: center;padding-right: 10rpx;width: 220rpx;">
            <image
              style="width: 40rpx;height: 40rpx;padding-right: 10rpx;"
              src=""
              mode="widthFix"
            ></image>
            <text>生日礼遇</text>
          </view>
          <view style="flex: 1;font-size: 24rpx;">登记生日信息，享专属生日礼(即将上线)</view>
        </view>
        <view style="max-width: 100%;padding: 40rpx 10rpx;background-color: #fff;display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;">
          <view style="display:flex;align-items: center;padding-right: 10rpx;width: 220rpx;">
            <image
              style="width: 40rpx;height: 40rpx;padding-right: 10rpx;"
              src=""
              mode="widthFix"
            ></image>
            <text>会员专属客服</text>
          </view>
          <view style="flex: 1;font-size: 24rpx;">官网及小程序会员优享接待(即将上线)</view>
        </view>

        <view style="max-width: 100%;padding: 40rpx 10rpx;background-color: #f1f1f1;display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;">
          <view style="display:flex;align-items: center;padding-right: 10rpx;width: 220rpx;">
            <image
              style="width: 40rpx;height: 40rpx;padding-right: 10rpx;"
              src=""
              mode="widthFix"
            ></image>
            <text>会员积分礼遇</text>
          </view>
          <view style="flex: 1;font-size: 24rpx;">累计实付消费金额都将会折算成会员积分，积分可享不定期多重礼遇(即将上线)</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import api from '@/api/api';
import tip from '@/utils/tip';
import NavBar from '../../components/common/navbar';
import { CART_KEY, USER_INFO, SYSTEM_INFO, CUSTOMER_INFO, MERCHANT_INFO, USER_SPECICAL_INFO } from '@/utils/constant';
export default {
  config: {
    navigationBarTitleText: '成功入会'
  },
  components: {
      navBar: NavBar
    },
  data() {
    return {
      isShowCustomNavBar: true,
            navbarData: {
              showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
              title: '' //导航栏 中间的标题
            },
      joinSuccess: '恭喜入会成功!',
      identifier: 'joinMemberSuccess',
      preview: false,
      memberImage: '',
      memberDefaultImage: 'https://efc-public-assets-1252208446.cos.ap-shanghai.myqcloud.com/images/crm/2020011698983.jpg',
      goHome: 0,
      isICH: -1,
      isPb: -1,
      nowPages:'',
    };
  },
  onLoad(option) {
    let that = this;
    let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
    this.isICH = merchantInfo.cloudMerchantId == 100000054 ? 1 : 0;
    this.isPb = merchantInfo.cloudMerchantId == 100000057 ? 1 : 0;
    this.identifier = option.identifier ? option.identifier : this.identifier;
    this.preview = option.preview ? option.preview : true;
    that.getCMSPageInfo(this.identifier);
    let pages = getCurrentPages();
    var currPage = pages[pages.length - 1];
    this.nowPages = currPage.route;
  },
  onShow(){
    getApp().cl_tracker.track('mini_program_view', {
          path:  this.nowPages,
          pageName: '入会成功',
        })
  },
  onUnload(option) {
    if (this.goHome == 0) {
      uni.reLaunch({
        url: 'info'
      });
    }
  },

  methods: {
    /**
     * CMS配置页面
     */
    getCMSPageInfo: async function(identifier) {
      let that = this;
      let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
      let mt = '1.0';
      const json = await api.getConfigDetail({
        method: 'POST',
        query: {
          identifier: identifier,
          merchantId: merchantInfo.cloudMerchantId,
          storeId: merchantInfo.cloudMerchantStoreId,
          mt: mt
        }
      });
      if (json.data.code === 1000 && json.data.data !== null) {
        let configData = json.data.data;
        let cmsConfigData = {};
        if (this.preview) {
          cmsConfigData = JSON.parse(configData.preview);
        } else {
          cmsConfigData = JSON.parse(configData.content);
          let contents = configData.contents;
          for (let index in contents) {
            let startTime = contents[index].startTime;
            startTime = startTime.substring(0, 19);
            startTime = startTime.replace(/-/g, '/');
            let startTimeTimestamp = new Date(startTime).getTime();
            if (startTimeTimestamp <= new Date().getTime()) {
              cmsConfigData = JSON.parse(contents[index].content);
              break;
            }
          }
        }
        let CMSItembanner = cmsConfigData,
          CMSItembannerImage = cmsConfigData[0];
        that.memberImage = CMSItembannerImage[0].data.src;
      }
    },
    /**
     * 查看首页
     */
    goIndex() {
      this.goHome = 1;
      setTimeout(function() {
        uni.reLaunch({
          url: '/pages/home/home'
        });
      }, 50);
    },

    /**
     * 我的账户首页
     */
    goInfo() {
      uni.navigateTo({
        url: '/pages/customer/customer'
      });
    }
  }
};
</script>

<style lang="less">
.join-success {
  .member-success {
    font-size: 36rpx;
    text-align: center;
    margin-top: 30rpx;
    font-weight: 600;
  }

  .memberbtn_group {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
    width: 100%;
    color: #666;

    .memberBtn {
      font-size: 26rpx;
      padding: 0 20rpx;
      text-decoration: underline;
    }

    .home {
      padding-right: 10rpx;
    }

    .info {
      padding-left: 10rpx;
    }
  }

  .member-image {
    padding: 0 40rpx;
    margin-top: 80rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
